<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
 /* CSS样式制作 */  
.tabDiv{
    border-style:solid;
    border-color:blue;
    border-top-color:#C60;
    border-width:thin;
    border-top-width:medium;
    width:350px;
    height:120px;
    line-height:1.2ex;
    display:none;
    margin-top:60px;	
    margin-left:30px;		
} 
.tabUl{
    margin-top:-161.5px;
}
.tabLi{
    border-style:solid;
    border-color:grey;		
    border-width:thin;		
    border-bottom-width:medium;		
    width:60px;
    height:30px;
    display:inline-block;
    text-align:center;
    margin-right:10px;
    padding-top:5px;
    cursor:pointer;
}   
</style>
<script type="text/javascript">
function init(){
    var divs=document.getElementsByClassName("tabDiv");
    divs[0].style.display="block";	
    var lis=document.getElementsByClassName("tabLi");
    lis[0].style.borderTopColor="#C60";
    lis[0].style.borderTopWidth="medium";
    lis[0].style.borderBottomColor="white";
}          
// JS实现选项卡切换
function tabWork(index){		
    var divs=document.getElementsByClassName("tabDiv");
    for (var i=0;i<divs.length;i++){
        if (i==index){
            divs[i].style.display="block";
        } else {
            divs[i].style.display="none";
        }
    }
    var lis=document.getElementsByClassName("tabLi");
    for (var i=0;i<lis.length;i++){
        if (i==index){
            lis[i].style.borderTopColor="#C60";
            lis[i].style.borderTopWidth="medium";
            lis[i].style.borderBottomColor="white";
        }else{
            lis[i].style.borderTopColor="gray";
            lis[i].style.borderTopWidth="thin";
            lis[i].style.borderBottomColor="#C60";
        }
    }
}
</script> 
</head>
<body onLoad="init()">
<!-- HTML页面布局 -->
<div class="tabDiv">
    <p>275万购昌平邻铁三居 总价20万买一居</p>
    <p>200万内购五环三居 140万安家东三环</p>
    <p>北京首现零首付楼盘 53万购东5环50平</p>
    <p>京楼盘直降5000 中信府 公园楼王现房</p>
</div>
<div class="tabDiv">
    <p>40平出租屋大改造 美少女的混搭小窝</p>
    <p>经典清新简欧爱家 90平老房焕发新生</p>
    <p>新中式的酷色温情 66平撞色活泼家居</p>
    <p>瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div class="tabDiv">
    <p>通州豪华3居260万 二环稀缺2居250w甩</p>
    <p>西3环通透2居290万 130万2居限量抢购</p>
    <p>黄城根小学学区仅260万 121平70万抛!</p>
    <p>独家别墅280万 苏州桥2居优惠价248万</p>
</div>
<ul class="tabUl">
    <li class="tabLi" onclick="tabWork(0)">房产</li>    
    <li class="tabLi" onclick="tabWork(1)">家居</li>
    <li class="tabLi" onclick="tabWork(2)">二手房</li>
</ul> 
</body>
</html>